<%--
  Created by IntelliJ IDEA.
  User: 王睿雯
  Date: 2025/11/8
  Time: 22:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>空闲时间选择</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        .schedule-table {
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .schedule-table th, .schedule-table td {
            border: 1px solid #ddd;
            padding: 20px;
            text-align: center;
            min-width: 80px;
            height: 60px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .schedule-table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        .time-cell {
            background-color: white;
        }
        .time-cell.selected {
            background-color: #90EE90; /* 浅绿色 */
        }
        .submit-btn {
            padding: 12px 30px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .submit-btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<h2>请选择您的空闲时间</h2>
<p>点击格子选择空闲时间，再次点击取消选择</p>

<table class="schedule-table">
    <tr>
        <th>时间/星期</th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
    </tr>

    <!-- 5节课 × 7天 -->
    <% for(int slot = 1; slot <= 5; slot++) { %>
    <tr>
        <th>第<%=slot%>节</th>
        <% for(int day = 1; day <= 7; day++) { %>
        <td class="time-cell"
            data-weekday="<%=day%>"
            data-slot="<%=slot%>"
            onclick="toggleSelection(this, <%=day%>, <%=slot%>)">
        </td>
        <% } %>
    </tr>
    <% } %>
</table>

<button class="submit-btn" onclick="submitSchedule()">提交空闲时间</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 存储选中的时间格子
    let selectedSlots = [];

    // 切换选择状态
    function toggleSelection(element, weekday, slotNumber) {
        const isSelected = element.classList.contains('selected');

        if (isSelected) {
            // 取消选择
            element.classList.remove('selected');
            selectedSlots = selectedSlots.filter(item =>
                !(item.weekday === weekday && item.slotNumber === slotNumber)
            );
        } else {
            // 选择
            element.classList.add('selected');
            selectedSlots.push({
                weekday: weekday,
                slotNumber: slotNumber,
                selected: true
            });
        }
    }

    // 提交空闲时间
    function submitSchedule() {
        if (selectedSlots.length === 0) {
            alert('请至少选择一个空闲时间段！');
            return;
        }

        $.ajax({
            url: '${pageContext.request.contextPath}/schedule/submit',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ selections: selectedSlots }),
            success: function(response) {
                if (response.success) {
                    alert('空闲时间提交成功！');
                    // 清空选择
                    selectedSlots = [];
                    document.querySelectorAll('.time-cell.selected').forEach(cell => {
                        cell.classList.remove('selected');
                    });
                } else {
                    alert('提交失败: ' + response.message);
                }
            },
            error: function() {
                alert('提交失败，请重试');
            }
        });
    }
</script>
</body>
</html>